<template>
  <div>
    <!-- 导航面包屑 -->
    <el-header>
      <div class="header-1">当前位置：</div>
      <div class="header-2">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>会员中心</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-header>
    <!-- aside-头像 -->
    <div class="aside-1">
      <div class="aside-photo">
        <el-avatar :size="50" :src="circleUrl"></el-avatar>
      </div>
      <div class="aside-user">
        <h1>用户名：<strong>17695471690</strong></h1>
        <h2>学员编号：</h2>
      </div>
      <div class="aside-btn">
        <button class="aside-btn-1">退出</button>
      </div>
    </div>
    <!-- aside-导航tabs -->
    <div class="aside-tabs">
      <el-tabs tab-position="left">
        <el-tab-pane label="个人中心首页">
          <div class="tabs-1-1">
            <img src="detail-pic/ms1.png" alt="" />
            <img src="detail-pic/ms2.png" alt="" />
            <img src="detail-pic/ms3.png" alt="" />
          </div>
          <div>
            <div>
              <strong>助教练习方式</strong>
              <img src="detail-pic/pleaTitbg.png" alt="" />
            </div>
            <div>
              
            </div>
          </div>
          <div></div>
        </el-tab-pane>
        <el-tab-pane label="个人信息">配置管理</el-tab-pane>
        <el-tab-pane label="我收藏的老师">角色管理</el-tab-pane>
        <el-tab-pane label="请家教订单">定时任务补偿</el-tab-pane>
        <el-tab-pane label="留言反馈">角色管理</el-tab-pane>
        <el-tab-pane label="修改密码">角色管理</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.tabs-1-1 {
  display: flex;
  justify-content: space-evenly;
  margin-top: 30px;
}
.el-tabs--left .el-tabs__header.is-left {
  float: left;
  margin-bottom: 0;
  margin-right: 10px;
  width: 235px;
  height: auto;
}
.aside-1 {
  width: 235px;
}
.header-1 {
  float: left;
  margin-top: 0px;
  margin-left: 0px;
  font-size: 14px;
}
.header-2 {
  float: left;
}
.aside-photo {
  text-align: center;
}
.aside-user h1,
h2 {
  text-align: center;
  font-size: 100%;
  font-weight: normal;
}
.aside-btn {
  width: 208px;
  height: 46px;
  position: relative;
  text-align: center;
  border-bottom: 1px dashed #ddd;
  margin: 0 auto;
}
.aside-btn-1 {
  margin-top: 10px;
  width: 69px;
  height: 25px;
}
</style>